window.addEventListener('load', function () {


    //like轮播图数据请求
    likeProShow()
    function likeProShow() {
        var likeShowbox = document.querySelector('.like-show');
        if (window.XMLHttpRequest) {
            var xhr = new XMLHttpRequest();
        }
        xhr.open('get', 'http://localhost:3000/product', false);
        xhr.send();
        if (xhr.status == 200 && xhr.readyState == 4) {
            var data = JSON.parse(xhr.responseText);
            // console.log(data);
            var str = '';
            for (var i = 0; i < data.length; i++) {
                // console.log(data[i].smallImg);
                if (data[i].smallImg != 'null') {
                    str += `
                <div class="like-item animate__animated">
                        <div class="ins-productItem " data-id="${data[i].id}">
                            <div class="ins-productItem-top">
                                <div class="ins-productItem-img">
                                    <img src="${data[i].smallImg}" alt="">
                                </div>
                            </div>
                            <div class="ins-productItem-bottom">
                                <div class="ins-flex_1">
                                    <div class="name">${data[i].name}</div>
                                    <div class="tags"></div>
                                </div>
                                <div class="footer-price">
                                    <span class="unit">￥</span>
                                    <span class="priceNum">${data[i].price}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `
                }

            }
            // console.log(str);
            likeShowbox.innerHTML = str;

            // 给like的每个商品都添加点击事件跳转到详情页面
            likeOnclick()
            function likeOnclick() {
                var likePros = document.querySelectorAll('.ins-productItem');
                for (var i = 0; i < likePros.length; i++) {
                    likePros[i].onclick = function () {
                        console.log();
                        window.location.href = `detail.html?id=${this.dataset.id}`;
                    }

                }
            }
        }
    }



    //轮播图
    lunbo();
    function lunbo() {
        var index = 1;
        var imgItem = document.getElementsByClassName('swiper-item');
        var barPro = document.querySelector('.progress');//进度条
        var current = document.querySelector('#current');//进度条
        // //右按钮
        // var btnRight = document.querySelector('.ban-btn-right');
        // //左按钮
        // var btnLeft = document.querySelector('.ban-btn-left');

        var container = document.querySelector('.banner');
        var imgFirst = container.firstElementChild.cloneNode();
        imgFirst.innerHTML = imgItem[0].innerHTML;
        container.appendChild(imgFirst);
        initSwiper();
        function initSwiper() {
            for (var i = 0; i < imgItem.length; i++) {
                imgItem[i].style.left = i * 100 + '%';
            }
        }
        // //右按钮添加点击事件
        // btnRight.onclick = function () {
        //     clearInterval(timer);
        //     slideShow();
        //     timer = window.setInterval(function () {
        //         slideShow();
        //     }, 3000)
        // }
        // //左按钮添加点击事件
        // btnLeft.onclick = function () {
        //     clearInterval(timer);
        //     index -= 2;
        //     slideShow();
        //     timer = window.setInterval(function () {
        //         slideShow();
        //     }, 3000)
        // }
        function slideShow() {

            for (var i = 0; i < imgItem.length; i++) {
                imgItem[i].style.transition = 'all .3s ease-in-out';
                imgItem[i].style.left = (i - index) * 100 + "%";
            }
            index++;
            clearTimeout(myTime);
            barPro.classList.remove('animate');  //移除类名
            var myTime = setTimeout(function () {
                barPro.classList.add('animate');
            }, 50)
            if (index == imgItem.length) {
                setTimeout(function () {
                    for (var i = 0; i < imgItem.length; i++) {
                        imgItem[i].style.transition = 'none';
                        imgItem[i].style.left = i * 100 + "%";
                    }
                    index = 1;
                }, 300)
            }
            if (index <= 0) {
                index = 5;
                for (var i = 0; i < imgItem.length; i++) {
                    imgItem[i].style.transition = 'all .3s ease-in-out';
                    imgItem[i].style.left = (i - index) * 100 + "%";
                }
            }
        }
        var timer = window.setInterval(function () {
            slideShow();
            if (index > 5) {
                current.innerHTML = 1;
            } else {
                current.innerHTML = index;

            }
        }, 3000)
    }

    //hot轮播展示
    hotBanner()
    function hotBanner() {
        var index = 1;
        var hotBox = document.querySelector('.hot-container');
        var item = document.querySelectorAll('.hot-item');
        var barPro = document.querySelector('.hot-bar .progress');
        var width = parseFloat(getComputedStyle(item[0]).width);
        var itemFirst = hotBox.firstElementChild.cloneNode();
        var itemLast = hotBox.lastElementChild.cloneNode();
        itemFirst.innerHTML = item[0].innerHTML;
        itemLast.innerHTML = item[4].innerHTML;
        hotBox.appendChild(itemFirst);
        hotBox.insertBefore(itemLast, hotBox.childNodes[0]);

        //右按钮
        var right = document.querySelector('.hot-right');
        right.onclick = function () {
            index++;
            show();
        }

        //左按钮
        var left = document.querySelector('.hot-left');
        left.onclick = function () {
            index--;
            show();
        }

        function show() {
            //进度条
            clearTimeout(myTime)
            barPro.classList.remove('animate');  //移除类名
            var myTime = setTimeout(function () {
                barPro.classList.add('animate');
            }, 50)

            // console.log(index);
            hotBox.style.left = index * -width + 'px';
            hotBox.style.transition = 'all 0.3s linear';

            // console.log(item.length);
            if (index == item.length + 1) {
                index = 1;
                setTimeout(function () {
                    hotBox.style.left = -1280 + 'px';
                    hotBox.style.transition = 'none'
                }, 300)
            } else if (index <= 0) {
                index = 5;
                setTimeout(function () {
                    hotBox.style.left = -6400 + 'px';
                    hotBox.style.transition = 'none'
                }, 300)
            }

        }
        var myTimer = setInterval(function () {
            index++;
            show();
        }, 3000)
    }

    //hot轮播图加点击事件
    hotProshow()
    function hotProshow() {
        var lbbgoods = document.querySelectorAll('.lbbgood');

        for (var i = 0; i < lbbgoods.length; i++) {
            lbbgoods[i].onclick = function () {
                // console.log(this.dataset.index);
                window.location.href = `detail.html?id=${this.dataset.index}`;
            }
        }

        var lbbgoodrs = document.querySelectorAll('.hot-item-rightBottom');

        for (var i = 0; i < lbbgoodrs.length; i++) {
            lbbgoodrs[i].onclick = function () {
                console.log(this.dataset.index);
                window.location.href = `detail.html?id=${this.dataset.index}`;
            }
        }
    }


    //like轮播图
    likePro()
    function likePro() {
        var leftBtn = document.querySelector('.like-left');
        var rightBtn = document.querySelector('.like-right');
        var goodItem = document.querySelector('.like-item');
        var itemnum = document.querySelectorAll('.like-item').length;
        var show = document.querySelector('.like-show');

        /* //展示的盒子的宽度
        var box = document.querySelector('.like-box');
        var boxWith = box.clientWidth;
        //展示盒子的padding值
        var boxPaddingr = parseFloat(window.getComputedStyle(box).paddingRight);
        var boxPaddingl = parseFloat(window.getComputedStyle(box).paddingLeft);
        //盒子的内部展示宽度
        var boxShowWidth = boxWith - boxPaddingr - boxPaddingl; 

        // 轮播图的宽度
        var showWith = show.clientWidth;
        var showWith = 7 * itemWith;
        */

        //item的宽度
        var itemBox = parseFloat(window.getComputedStyle(goodItem).width);
        //item的外边距
        var goodItemMargin = parseFloat(window.getComputedStyle(goodItem).marginRight);
        // item的宽度加外边距
        var itemWith = itemBox + goodItemMargin;
        // console.log(itemWith);

        //元素移动的最大距离
        var maxMove = -(itemnum - 3) * itemWith;
        // console.log(maxMove+'maxMove');

        //右按钮点击事件
        rightBtn.onclick = function () {
            //获取当前轮播图的位置
            var str = show.style.transform;
            var current = parseFloat(str.substring(11));
            //移动的距离
            var moveWidth = current - itemWith;
            // console.log(moveWidth+'moveWidth');

            if (moveWidth > maxMove) {
                leftBtn.style.backgroundColor = '#afafaf';
                leftBtn.style.cursor = 'pointer';
                show.style.transform = `translateX(${moveWidth}px)`;
            } else {
                rightBtn.style.backgroundColor = '#d1d0ce';
                rightBtn.style.cursor = 'not-allowed';
                show.style.transform = `translateX(${maxMove}px)`;
            }
        }

        //左按钮点击事件
        leftBtn.onclick = function () {
            //获取当前轮播图的位置
            var str = show.style.transform;
            var current = parseFloat(str.substring(11));
            // console.log(current+'current');
            //移动的距离
            var moveWidth = current + itemWith;
            // console.log(moveWidth+'moveWidth');
            if (moveWidth < 0) {
                rightBtn.style.backgroundColor = '#afafaf';
                rightBtn.style.cursor = 'pointer';
                show.style.transform = `translateX(${moveWidth}px)`;
            } else {
                leftBtn.style.backgroundColor = '#d1d0ce';
                leftBtn.style.cursor = 'not-allowed';
                show.style.transform = `translateX(0px)`;
            }
        }
    }


    // 滚动展示事件
    boxShow();
    function boxShow() {
        var flag1 = true;
        var flag2 = true;
        var flag3 = true;

        window.onscroll = function () {
            var height = document.documentElement.scrollTop;
            var showHeight = document.documentElement.clientHeight;
            var hot = document.querySelector('.hot');
            var hotAn = document.querySelector('.hot-item-rightTop');
            var topic = document.querySelector('.topic');
            var topicAn = document.querySelector('.topic-content');
            var topicAns = document.querySelectorAll('.topic-item');
            var like = document.querySelector('.like');
            var likeAn = document.querySelector('.like-banner-img');
            var likebox = document.querySelector('.like-content');
            var likeAns = document.querySelectorAll('.like-item');
            if ((height > hot.offsetTop - showHeight / 2) && flag1) {
                titleShow('.tanHot .tit', 'HOT', 200);
                flag1 = false;
                hotAn.classList.add('animate__fadeInUp');
            } else if ((height > topic.offsetTop - showHeight / 2) && flag2) {
                titleShow('.topic .tit', 'TOPIC', 200);
                topicAn.classList.add('animate__fadeInUp');
                topicAn.style.visibility = 'visible';
                for (var i = 0; i < topicAns.length; i++) {
                    topicAns[i].classList.add('animate__fadeInBottomRightp');
                }
                flag2 = false;
            } else if (height > like.offsetTop - showHeight / 2 && flag3) {
                titleShow('.like .tit', 'YOU LIKE', 200);
                likeAn.classList.add('animate__fadeInUp');
                likeAn.style.visibility = 'visible';
                flag3 = false;
            } else if (height > likebox.offsetTop - showHeight / 2) {
                for (var i = 0; i < topicAns.length; i++) {
                    likeAns[i].classList.add('animate__fadeInRight');
                }
            }
        }
    }


    titleShow('.topic .tit', 'TOPIC', 200);

    titleShow('.like .tit', 'YOU LIKE', 200);

    titleShow('.tanHot .tit', 'HOT', 200);








})
